<template>
    <div>   
        <van-nav-bar
            :title="detail.name"
            left-text="返回"
         
            left-arrow
            @click-left="$router.back()"
         />
         <div>当前状态: {{ status }}</div>
         <div>
           <div>报名时间</div>
           <div>
            报名起始时间: 
            {{ detail.enrollStime  | format('YYYY-MM-DD') }}
            至
            {{ detail.enrollEtime  | format('YYYY-MM-DD') }}
           </div>
         </div>

         <div>
           <div>比赛时间</div>
           <div>
            比赛起始时间: 
            {{ detail.stime  | format('YYYY-MM-DD') }}
            至
            {{ detail.etime  | format('YYYY-MM-DD') }}
           </div>
         </div>
         <div>
         </div>
         <div>
            <div>请填写一下其他的信息</div>
            {{ formVal }}
            <div v-for="item in cusForm" :key="item.label">
                <!-- 如果是是文本输入框 -->
                <van-field 
                    v-if="item.type==='text'"
                    v-model="formVal[item.varname]" 
                    :label="item.label" 
                    :placeholder="item.placeholder"
                />
                <!-- 如果是日期选择 -->

                <template v-if="item.type === 'date'">
                    <van-field
                        readonly
                        clickable
                        name="datetimePicker"
                        :value="formVal[item.varname] | format('YYYY-MM-DD')"
                        :label="item.label"
                        :placeholder="item.placeholder"
                        @click="item.show = true"
                    />
                    <van-popup v-model="item.show" position="bottom">
                    <van-datetime-picker
                        type="date"
                        v-model="formVal[item.varname]"
                        @cancel="item.show = false"
                    />
                    </van-popup>

                </template>

                <!-- 如果是单选 -->
                <template v-if="item.type==='radio'">
                    <van-field name="radio" :label="item.label">
                        <template #input>
                            <van-radio-group v-model="formVal[item.varname]" direction="horizontal">
                            <van-radio :name="op" v-for="op of item.options" :key="op"> {{ op }}</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                </template>


             
            </div>
          

         </div>
         <van-button v-if="status==='报名中'" @click="handleJoing">立即报名</van-button>
    </div>
   
</template>
<script>
// 单独的剥离组件的业务
import Cp from './index'
export default Cp
</script>
<style scoped lang="scss">
// 单独的剥离样式文件
@import './style.scss';
</style>